<!--
 * @Descripttion: 颜色组的选择
 * @version: 0.0.1
 * @Author: linchun
 * @Date: 2021年12月23日08:16:01
 * @LastEditors: linchun
 * @LastEditTime: 2021-12-24 10:47:38
-->
<template>
  <div class="select-box">
    <div class="select-echo" @click.stop="optionTab">
      <span v-if="!selectVal">请选择主题</span>
      <span v-else class="color-box">
        <span
          v-for="(ele, index) in selectVal"
          :key="index"
          class="aaa"
          :style="{ background: ele }"
        >
        </span>
      </span>
    </div>
    <div class="drop-box" v-if="isOption">
      <div class="option-box">
        <div
          v-for="(item, key) in options"
          :key="key"
          @click="selectClick(item)"
        >
          <div>
            <span
              v-for="(ele, index) in item.value"
              :key="index"
              class="aaa"
              :style="{ background: ele }"
            >
            </span>
          </div>
        </div>
      </div>

      <div x-arrow="" class="popper__arrow"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["value", "type"],
  data() {
    return {
      val: this.value,
      options: [
        {
          value: [
            "#01def6",
            "#cccccc",
            "#FF3333",
            "#37a2da",
            "#32c5e9",
            "#ffdb5c",
          ],
          label: "绿灰",
        },
        {
          value: [
            "#01def6",
            "#FF3333",
            "#cccccc",
            "#37a2da",
            "#8378ea",
            "#ffdb5c",
          ],
          label: "绿红灰",
        },
        {
          value: [
            "#01def6",
            "#FF3333",
            "#37a2da",
            "#8378ea",
            "#ffdb5c",
            "#e690d1",
          ],
          label: "绿红蓝",
        },
        {
          value: [
            "#01def6",
            "#37a2da",
            "#FF3333",
            "#8378ea",
            "#ffdb5c",
            "#e690d1",
          ],
          label: "绿蓝红",
        },
        {
          value: [
            "#ffdb5c",
            "#8378ea",
            "#ffdb5c",
            "#e690d1",
            "#ff9f7f",
            "#fb7293",
          ],
          label: "活力",
        },
        {
          value: [
            "#00f6fd",
            "#FF0000",
            "#c0504d",
            "#ffdb5c",
            "#32c5e9",
            "#37a2da",
          ],
          label: "日落",
        },
        {
          value: [
            "#e690d1",
            "#32c5e9",
            "#9d96f5",
            "#37a2da",
            "#32c5e9",
            "#ffdb5c",
          ],
          label: "清晨",
        },
        {
          value: [
            "#37a2da",
            "#32c5e9",
            "#9d96f5",
            "#37a2da",
            "#32c5e9",
            "#ffdb5c",
          ],
          label: "黄昏",
        },
        {
          value: [
            "#37a2da",
            "#32c5e9",
            "#9d96f5",
            "#37a2da",
            "#e690d1",
            "#ffdb5c",
          ],
          label: "冬天",
        },
        {
          value: [
            "#e7bcf3",
            "#ffdb5c",
            "#32c5e9",
            "#ffdb5c",
            "#32c5e9",
            "#ffdb5c",
          ],
          label: "午后",
        },
      ],
      isOption: false,
      selectVal: this.value,
    };
  },
  mounted() {
    let that = this;
    document.addEventListener("click", function (e) {
      that.isOption = false;
    });
  },
  methods: {
    change(data) {
      this.$emit("change", {
        key: this.type,
        value: data,
      });
    },
    optionTab() {
      this.isOption = !this.isOption;
    },
    selectClick(item) {
      this.selectVal = item.value;
      this.isOption = false;
      this.$emit("change", {
        key: this.type,
        value: item.value,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.select-box {
  position: relative;
}
.select-echo {
  width: 100%;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  .color-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}
.drop-box {
  position: absolute;
  top: 29px;
  z-index: 9999;
  margin-top: 6px;
  .popper__arrow {
    top: -5px;
    left: 35px;
    margin-right: 3px;
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
  }
  // .popper__arrow:after {
  //   position: absolute;
  //   display: block;
  //   width: 0;
  //   height: 0;
  //   border-color: transparent;
  //   border-style: solid;
  //   top: 1px;
  //   margin-left: -6px;
  //   border-top-width: 0;
  //   border-bottom-color: #fff;
  //   content: " ";
  //   border-width: 6px;
  // }
}
.option-box {
  background: #fff;
  width: 100%;
  height: 182px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
  overflow-y: scroll;
}
// .option-box::-webkit-scrollbar{
// 	display: none
// }
.aaa {
  display: inline-block;
  width: 20px;
  height: 20px;
}
</style>
